<li class="pb-10 pl-6 border-l {% if selected_documents %}border-l-green-200{% endif %}">
    <span class="absolute flex items-center justify-center w-8 h-8 {% if current_topic %}bg-green-200{% else %}bg-slate-200{% endif %} rounded-full -start-4 ring-4 ring-white dark:ring-slate-900 dark:bg-slate-700">
        <svg xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
             class="w-3.5 h-3.5 {% if current_topic %}text-green-900{% endif %}">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
        </svg>
    </span>
    <h3 class="font-medium leading-tight {% if current_topic %}text-slate-800{% endif %}">Relevant documents</h3>
    <p class="text-sm">Select relevant documents</p>
    {% if current_topic %}
        <div class="mt-3">
            {% comment %} This can't be a form or else the "View Contents" button will submit a form {% endcomment %}
            <input type="hidden" name="chat_id" value="{{ current_chat.chat_id }}">
            <div hx-include="previous input"
                 hx-post="{% url 'search_relevant_documents' %}"
                 hx-trigger="search-docs from:body"
                 class="relative overflow-x-auto shadow-md rounded-lg">
                {% include "_select_relevant_docs_search_results.html" %}
            </div>
        </div>
    {% endif %}
</li>
